<template>
	<view class="uni_content">
		<tn-nav-bar fixed :backTitle="backTitle" :beforeBack="backClick">新增地址</tn-nav-bar>
		
		<view class="content" :style="{paddingTop: vuex_custom_bar_height + 5 + 'px'}">
			<tn-form :model="form" ref="form" :labelWidth="labelWidth" :errorType="['message']">
				<tn-form-item label="姓名" prop="name">
					<tn-input v-model="form.name" placeholder="请输入您的姓名" />
				</tn-form-item>
				<tn-form-item label="手机号" prop="phone">
					<tn-input v-model="form.phone" placeholder="请输入您的手机号" />
				</tn-form-item>
				<tn-form-item label="所在地区" prop="region">
					<span :class="{'region': province==='请选择省、市、区', 'region2': province!=='请选择省、市、区'}" @click="regionShow=true">{{ province }}</span>
				</tn-form-item>
				<tn-form-item label="详细地址" prop="detailedAddress">
					<tn-input v-model="form.detailedRegion" placeholder="如小区、楼栋号、门牌号等" />
				</tn-form-item>
			</tn-form>
			<view class="recognition_box">
				<text class="tn-icon-font recognition"></text>
				<span class="recognition_title">智能识别</span>
			</view>
			<auto-parse-address style="width: 100%;padding-top: 13px;" boxClass="c-box" @result="result"></auto-parse-address>
		</view>
		<tn-picker mode="region" v-model="regionShow" confirmColor="#fff" @confirm="reginConfirm"></tn-picker>
	</view>
</template>

<script>
import autoAddressParse from '@/uni_modules/auto-parse-address/components/auto-parse-address/auto-parse-address.vue';

export default {
	components: {
		autoAddressParse
	},
	data() {
		return {
			backTitle: '',
			regionShow: false,
			labelWidth: 150,
			province: '请选择省、市、区',
			form: {
				name: '',
				phone: '',
				region: '',
				detailedRegion: ''
			},
		}
	},
	methods: {
		backClick() {
			uni.navigateBack({
				delta: 1
			})
		},
		reginConfirm(e) {
			this.province = e.province.label + e.city.label + e.area.label;
		},
		result(e) {
			console.log(e)
			this.form.name = e.name;
			this.form.phone = e.phone;
			this.province = e.province + e.city + e.area;
			this.form.detailedRegion = e.detail;
		}
	}
}
</script>

<style scoped>
.content {
	padding: 15px 20px;
}
.region {
	color: #AAAAAA;
}
.region2 {
	color: #1A1A1A;
}
.recognition {
	font-size: 14px;
	font-weight: 800;
}
.recognition_title {
	margin-left: 8px;
	color: #1A1A1A;
	font-size: 12px;
	line-height: 14px;
	font-weight: 800;
}
.recognition_box {
	width: 100%;
	margin-top: 24px;
}
</style>